<!--
    amusement 文件夹下主要存放 “休闲娱乐” 相关的 API
    随机笑话
    内容展示：
        表格
-->
<template>

    <div class="container">

      <!--  面包屑导航 -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
          <li class="breadcrumb-item"><a href="#">休闲娱乐</a></li>
          <li class="breadcrumb-item active" aria-current="page">每日笑话</li>
        </ol>
      </nav>

      <!--  头部卡片  -->
      <div class="card border-primary">
        <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
        <div class="card-header">每日笑话</div>
        <div class="card-body ">
          <h5 class="card-title text-primary">获得几条笑话，开心一下呗~</h5>
          <p class="card-text"></p>
<!--          <a href="#" class="btn btn-outline-success">获取每日笑话</a>-->
          <button type="button" @click="getJokes" class="btn btn-outline-success">获取随机笑话</button>

          <div class="spinner-border text-success ml-5" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      </div>

      <!--  内容展示表格  -->
      <table class="table table-hover table-bordered mt-3">
        <thead class="thead-light">
        <tr>
          <th scope="col">#</th>
          <th scope="col">笑话内容</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in jokeList" :key="item.id">
          <th class="table-info" scope="row">{{ index + 1}}</th>
          <td class="">{{ item }}</td>
        </tr>
        </tbody>
      </table>

    </div>

</template>

<script>
  export default {
    data() {
      return {
        jokeList: [],
      }
    },
    methods: {
      async getJokes() {
        this.$(".spinner-border").css("display", "inline-block");

        // setTimeout(function () {
        //   document.getElementsByClassName("spinner-border")[0].style.display = "none";
        // }, 1000);

        const result = await this.$http.get("https://autumnfish.cn/api/joke/list?num=10");
        this.jokeList = result.data.jokes;

        if (this.jokeList.length !== 0) {
          this.$(".spinner-border").css("display", "none");

        }
      }
    },

  }
</script>

<style scoped>

  .spinner-border {
    display: none;
  }

</style>
